<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>项目进度表</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>名称</label>
                                    <input type="text" name="name" class="form-control" placeholder="请输入项目名称或订单号或代码">
                                </div>
                                <!--<div class="form-group" style="margin-right: 10px;">
                                    <label>客户名</label>
                                    <input type="text" name="code" class="form-control" placeholder="请输入客户名">
                                </div>-->
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>客户名</label>
                                    <input type="text" name="client" class="form-control" placeholder="请输入客户">
                                </div>
                                <!--<div class="form-group" style="margin-right: 10px;">
                                    <label>数量</label>
                                    <input type="text" name="num" class="form-control" placeholder="请输入数量">
                                </div>-->
                                <!--<div class="form-group" style="margin-right: 10px;">
                                    <label>状态</label>
                                    <select name="status" class="form-control">
                                        <option value="2" selected="selected">未完成</option>
                                        <option value="3">已完成</option>
                                        <option value="0">取消</option>
                                        <option value="">全部</option>
                                    </select>
                                </div>-->
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>生产厂</label>
                                    <select name="factories" class="form-control">
                                        <option value="" selected="selected">请选择</option>
                                        <option th:each="factory:${factories}" th:value="${factory.name}"
                                                th:text="${factory.name}"></option>
                                    </select>
                                </div>
                                <!--<div class="form-group" style="margin-right: 10px;">
                                    <label>年度</label>
                                    <select id="year" name="year" class="form-control">
                                        <option value="" selected="selected">请选择</option>
                                    </select>
                                </div>-->
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>年度</label>
                                    <select id="year" name="year" class="form-control">
                                        <option value="" selected="selected">请选择</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <!--<i class="fa fa-search"></i>-->
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>
                        <!--<div class="row" style="margin-top: 10px">
                            <div class="form-inline">

                                <div class="form-group" style="margin-right: 10px;">
                                    <label>时间</label>
                                    <input type="text" class="form-control datepicker" name="startTime" readonly="readonly"/>
                                    <span>至</span>
                                    <input type="text" class="form-control datepicker" name="endTime" readonly="readonly"/>
                                </div>
                            </div>
                        </div>-->
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" style="table-layout: fixed;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var names = ["", "未开始", "执行中", "已完成"];
    var table;

    function yearSelectCreate() {
        var date = new Date();
        var endYear = date.getFullYear();
        for (var i = endYear; i >= 2016; i--) {
            if (i === 2016) {
                $("#year").append("<option value='" + i + "'>" + i + "年及以前" + "</option>");
            } else {
                $("#year").append("<option value='" + i + "'>" + i + "年" + "</option>");
            }
        }
        $("#year").val(endYear);
    }

    $(function () {
        yearSelectCreate();
        /**
         * 加载列表
         */
        table = js.table.init({
            url: ctx + "integrate/progress/list",
            pageSize: 10,
            showColumns: true,
            showExport: true,
            sortable: true,                                    // 是否启用排序
            sortStable: true,                                  // 设置为 true 将获得稳定的排序
            columns: [
                {
                    title: '序号', field: 'id', width: '60',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {title: '项目名称', field: 'name', width: '250'},
                {
                    title: '生产厂', field: 'factories', width: '120',
                    formatter: function (value, row, index) {
                        if (value != null) {
                            return value.split(',').join('<br>');
                        }
                    }
                },
                // {title: '客户', field: 'client', width: '100'},
                // {title: '订单号', field: 'orderNum', width: '80'},
                {title: '代码', field: 'code', width: '80'},
                {title: '数量', field: 'num', width: '100'},
                {title: '面积', field: 'area', width: '100'},
                {title: '客户名', field: 'client', width: '80'},
                {
                    title: '客户要求<br>发货日期', field: 'shipTime', width: '100',
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (row.topic === 1) {
                            return `<span class="text-red">${value}</span>`;
                        }
                        return value;
                    }
                },
                {title: '备注', field: 'remark', width: '200'},
                {title: '喷涂要求', field: 'spray', width: '80'},
                {
                    title: '是否拼装', field: 'assemble', width: '80',
                    formatter: function (value, row, index) {
                        if (value === 1) {
                            return '拼装';
                        } else if (value === 0) {
                            return '免拼装';
                        }
                    }
                },
                {title: '工艺<br>下单日期', field: 'processStartTime', width: '100'},
                {title: '工艺工期', field: 'processDay', width: '100'},
                {title: '工艺<br>下图日期', field: 'processEndTime', width: '100'},
                {title: '图纸下发<br>车间日期', field: 'produceStartTime', width: '100'},
                {title: '焊接工期', field: 'produceDay', width: '100'},
                {title: '平库件', field: 'consumeNum', width: '100'},
                {title: '焊接剩余<br>件数', field: 'notCompleteNum', width: '100'},
                {title: '焊接<br>完成日期', field: 'produceEndTime', width: '100'},
                {title: '喷涂<br>开始日期', field: 'sprayStartTime', width: '100'},
                {title: '喷涂工期', field: 'sprayDay', width: '100'},
                {title: '喷涂件数', field: 'sprayNum', width: '100'},
                {title: '喷涂<br>完成日期', field: 'sprayEndTime', width: '100'},
                {
                    title: '包装进度', field: 'packStatus', width: '80',
                    formatter: function (value, row, index) {
                        return names[value]
                    }
                },
                {title: '平库<br>完成日期', field: 'consumeEndTime', width: '100'},
                {title: '打包<br>完成日期', field: 'packEndTime', width: '100'},
                {title: '项目<br>完成日期', field: 'completeTime', width: '100'},
                {title: '预计<br>完成日期', field: 'planCompleteTime', width: '100'}/*,
                        {
                            title: '操作', width: '40',
                            formatter: function (value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-xs ' + (row.topic === 1 ? 'btn-danger' : 'btn-info') + '" href="'+ ctx + 'board/single/' + row.id + '"> 查看</a> ');
                                return actions.join('');
                            }
                        }*/
            ]
        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });
    });
</script>
</body>
</html>
